<template>
  <div id="app">
    <div class="header"></div>
    <div class="container">
      <div class="nav">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          @select="handleSelect"
          background-color="#4f4e4e"
          text-color="#fff"
          router
          active-text-color="#ffd04b">
            <el-menu-item v-for="item in routeList" :key="item.path" :index="item.path">{{item.meta.title||''}}</el-menu-item>
        </el-menu>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
<!--    <router-view></router-view>-->

  </div>
</template>

<script>
import {routes} from "./router/index.js"

export default {
  name: 'App',
  data(){
    return {
      routeList:[],
      activeIndex:''
    }
  },
  watch:{
    '$route'(to, from) {
      console.log('路由变化了master修改', from.path, '->', to.path);
      this.activeIndex=to.path
      // 在这里根据路由变化执行相应的逻辑
    }
  },
  created () {
    this.activeIndex=routes[0].path
    this.routeList=routes.filter(item=>Object.hasOwn(item, 'component'))
    console.log('this.routes',this.routeList)
  },
  mounted () {

  },
  methods:{
    handleSelect(key) {
      console.log('key',key)
      this.activeIndex=key
    }
  }

}
</script>

<style lang="scss" scoped>

.header{
  height: 40px;
  background: #4f4e4e;
}
.container{
  display: flex;
  height: calc(100% - 40px);
  overflow: hidden;
  .nav{
    width: 200px;
    background-color: #353e4c;
  }
  .content{
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #e4e9fc;
    padding: 10px;
    overflow: auto;
  }
}
</style>
